import {
  CalendarTwoTone,
  ReconciliationTwoTone,
  UserSwitchOutlined,
} from "@ant-design/icons";
import { Carousel, Divider, Tag } from "antd";
import * as echarts from "echarts";
import React, { useEffect, useState } from "react";

import one from "../../images/1.png";
import two from "../../images/2.png";
import three from "../../images/3.png";
import four from "../../images/4.png";
import lefts from "../../images/left.png";
import right from "../../images/right.png";

import "./index.less";

//可视化页面
export const Echarts = (props) => {
  let [mains, setMains] = useState("");
  let [left, setLeft] = useState("");

  let xLabel = ["9月", "10月", "11月", "12月", "1月", "2月", "3月"];
  let valueData = ["23", "28", "32", "29", "22", "38", "42"];

  var option;
  var option1;
  option = {
    title: {
      text: "月任务数量",
      textStyle: {
        color: "#235894",
      },
      left: "center",
      top: 8,
    },
    tooltip: {
      textStyle: {
        color: "#5c6c7c",
      },
      padding: [10, 10],
      // extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
      trigger: "axis",
      backgroundColor: "#fff",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "8%",
      containLabel: true,
    },
    toolbox: {
      show: false,
    },
    xAxis: [
      {
        type: "category",
        data: xLabel,
        axisLine: {
          lineStyle: {
            color: "rgba(193, 207, 220, 1)",
            width: 1,
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: "rgba(0, 0, 0, 0.72)",
            fontSize: 15,
          },
          margin: 15,
        },
        axisPointer: {
          snap: true,
          lineStyle: {
            color: "rgba(237, 130, 71, 1)",
            width: 1,
          },
          label: {
            show: false,
          },
          handle: {
            show: false,
          },
        },
        boundaryGap: false,
      },
    ],
    yAxis: [
      {
        type: "value",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "rgba(0, 0, 0, 0.72)",
            fontSize: 15,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(193, 207, 220, 1)",
            // type: 'dashed'
          },
        },
      },
    ],
    dataZoom: [
      {
        show: true,
        height: 8,
        xAxisIndex: [0],
        bottom: 30,
        start: 10,
        end: 90,
        handleIcon:
          "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
        handleSize: "180%",
        handleStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#fff",
            },
            {
              offset: 1,
              color: "#F0F5FA",
            },
          ]),
          borderColor: "#D1DCED",
        },
        textStyle: {
          color: "#333",
          fontSize: 14,
          zlevel: 10,
        },
        borderColor: "RGBA(221, 233, 242, 1)",
        backgroundColor: "RGBA(221, 233, 242, 1)",
      },
      {
        type: "inside",
        show: true,
        height: 5,
        start: 1,
        end: 35,
      },
    ],
    series: [
      {
        name: "处理任务数",
        type: "line",
        data: valueData,
        symbolSize: 10,
        symbol: "circle",
        smooth: false,
        yAxisIndex: 0,
        // showSymbol: false,
        label: {
          show: true,
          textStyle: {
            color: "rgba(237, 130, 71, 1)",
            fontSize: 20,
          },
          position: "top",
          formatter: function (p: any) {
            return p.value > 0 ? p.value : "";
          },
        },
        lineStyle: {
          width: 2,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "RGBA(255, 178, 121, 1)",
            },
            {
              offset: 1,
              color: "RGBA(255, 178, 121, 1)",
            },
          ]),
          shadowColor: "RGBA(255, 178, 121, 0.5)",
          shadowBlur: 10,
          shadowOffsetY: 10,
        },
        itemStyle: {
          normal: {
            color: "rgba(237, 130, 71, 1)",
            borderColor: "#fff",
            borderWidth: 3,
            shadowColor: "rgba(237, 130, 71, 1)",
            shadowBlur: 5,
          },
        },
        areaStyle: {
          //区域填充样式
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "RGBA(255, 195, 151, 1)",
                },
                {
                  offset: 0.6,
                  color: "RGBA(255, 237, 223, 1)",
                },
                {
                  offset: 1,
                  color: "RGBA(255, 255, 255, 1)",
                },
              ],
              false
            ),
            shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          },
        },
      },
    ],
  };

  option1 = {
    title: {
      text: "任务类型",
      textStyle: {
        color: "#235894",
      },
      left: "center",
      top: 8,
    },
    legend: {
      top: "bottom",
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
      },
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [20, 123],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 5,
        },
        data: [
          { value: 40, name: "已完成" },
          { value: 30, name: "开发中" },
          { value: 32, name: "测试中" },
          { value: 20, name: "bug" },
          { value: 28, name: "待完成" },
        ],
      },
    ],
  };
  useEffect(() => {
    let node = document.getElementById("main");
    // @ts-ignore
    setMains(node);
  }, []);
  useEffect(() => {
    let ende = document.getElementById("left");
    // @ts-ignore
    setLeft(ende);
  }, []);
  if (mains !== "") {
    // @ts-ignore
    var myChart = echarts.init(mains);
    myChart.setOption(option);
  }
  if (left !== "") {
    // @ts-ignore
    var myChart1 = echarts.init(left);
    myChart1.setOption(option1);
  }
  const Arrow = ({ img, type, onClick }: any) => (
    // eslint-disable-next-line jsx-a11y/alt-text
    <img src={img} className={`jiantou arrow-${type}`} onClick={onClick} />
  );
  return (
    <div
      style={{
        overflow: "scroll",
        width: "100%",
        height: "100%",
        backgroundColor: "#dee1e6",
        marginTop: 5,
        // borderRadius:8
      }}
    >
      <div
        style={{
          margin: 15,
          backgroundColor: "#ffffff",
          borderRadius: 8,
          height: 330,
        }}
      >
        <div style={{ margin: 15, display: "flex" }}>
          <h3 style={{ fontWeight: 700, paddingTop: 8, width: 400 }}>
            技术期刊
            <p style={{ marginTop: 15 }}>
              1、
              <a
                target="_blank"
                href="https://juejin.cn/post/7086759520025706526"
              >
                玻璃拟态是什么？前端该如何实现。
              </a>
            </p>
            <p>
              2、
              <a
                target="_blank"
                href="https://juejin.cn/post/7088983115473322015?utm_source=article_side"
              >
                创作新人榜第04期发布！快来看看哪些新人上榜啦～
              </a>
            </p>
            <p>
              3、
              <a
                target="_blank"
                href="https://juejin.cn/post/7085542534943883301"
              >
                2022 年的 React 生态。
              </a>
            </p>
            <p>
              4、
              <a
                target="_blank"
                href="https://juejin.cn/post/7085941958228574215"
              >
                虚拟列表，我真的会了！！！
              </a>
            </p>
          </h3>
          <div className="shang-left">
            <Carousel
              autoplay
              accessibility={true}
              arrows={true}
              prevArrow={<Arrow img={lefts} type="lefts" className="lefts" />}
              nextArrow={<Arrow img={right} type="right" className="rights" />}
            >
              <div className="contentstyle">
                <a
                  target="_blank"
                  href="https://juejin.cn/post/7086759520025706526"
                >
                  <img
                    src={one}
                    style={{ height: 310, width: 800, borderRadius: 8 }}
                  />
                </a>
              </div>
              <div className="contentstyle">
                <a
                  target="_blank"
                  href="https://juejin.cn/post/7088983115473322015?utm_source=article_side"
                >
                  <img
                    src={two}
                    style={{ height: 310, width: 800, borderRadius: 8 }}
                  />
                </a>
              </div>
              <div className="contentstyle">
                <a
                  target="_blank"
                  href="https://juejin.cn/post/7085542534943883301"
                >
                  <img
                    src={three}
                    style={{ height: 310, width: 800, borderRadius: 8 }}
                  />
                </a>
              </div>
              <div className="contentstyle">
                <a
                  target="_blank"
                  href="https://juejin.cn/post/7085941958228574215"
                >
                  <img
                    src={four}
                    style={{ height: 310, width: 800, borderRadius: 8 }}
                  />
                </a>
              </div>
            </Carousel>
          </div>
        </div>
      </div>
      <div style={{ margin: 15, backgroundColor: "#ffffff", borderRadius: 8 }}>
        <div style={{ margin: 15 }}>
          <h3 style={{ fontWeight: 700, paddingTop: 8 }}>注意事项信息</h3>
          <div>
            <span style={{ marginRight: 40, marginLeft: 40 }}>
              <UserSwitchOutlined
                style={{ height: 50, width: 50, fontSize: 25 }}
              />
              负责人
            </span>
            <span style={{ marginRight: 40, marginLeft: 40 }}>
              <CalendarTwoTone
                style={{ height: 50, width: 50, fontSize: 25 }}
              />
              开始时间
            </span>
            <span style={{ marginRight: 40, marginLeft: 40 }}>
              <ReconciliationTwoTone
                style={{ height: 50, width: 50, fontSize: 28 }}
              />
              任务状态
            </span>
          </div>
          <p>
            事项描述：提高数据服务支撑能力，建设高效完备的数据共享交换体系，编制全疆数据资源目录，明确部门共享责任清单，建立数据机制。
          </p>
          <Divider />
          <div style={{ paddingBottom: 15 }}>
            当前状态：正常 &nbsp;&nbsp;&nbsp;
            <Tag color="#2db7f5">更新</Tag>
          </div>
        </div>
      </div>

      <div
        style={{
          backgroundColor: "#ffffff",
          display: "flex",
          margin: 15,
          justifyContent: "space-around",
          borderRadius: 8,
        }}
      >
        <span id="main" style={{ width: 500, height: 400 }}></span>
        <span id="left" style={{ width: 400, height: 400 }}></span>
      </div>
    </div>
  );
};
